<!--
  - Copyright (C) 2024
  - All rights reserved, Designed By www.joolun.com
  - 注意：
  - 本软件为www.joolun.com开发研制，未经购买不得使用
  - 购买后可获得全部源代码（禁止转卖、分享、上传到码云、github等开源平台）
  - 一经发现盗用、分享等行为，将追究法律责任，后果自负
-->
<!-- 直播状态 -->
<template>
	<view>
		<!--  主播根据状态可以操作直播间（未实现）  -->
		<view v-if="liveInfo.id && (liveStatus != '1' || isAnchor)" class="live-status-desc" :style="{ width: sysInfo.windowWidth + 'px', top: sysInfo.safeArea?.top + 60 + 'px' }">
			<view>
				<text class="live-time">直播时间: {{ liveInfo.startTime }} 至 {{ liveInfo.endTime }}</text>
			</view>
			<!-- 	<view v-if="isAnchor" class="live-anchor-action">
				<text v-if="!timeOver&&liveStartCountdown&&(liveInfo.liveStatus == '0' || liveInfo.liveStatus == '3')" class="live-anchor-action-item" @tap.stop="handleLiveAction('1')">开启直播</text>
				<text v-if="!timeOver&&liveInfo.liveStatus == '1' && liveStatus == '1'" class="live-anchor-action-item" @tap="handleLiveAction('3')">暂停直播</text>
				<text v-if="liveInfo.liveStatus == '1'" class="live-anchor-action-item" @click.stop="handleLiveAction('2')">结束直播</text>
			</view> -->
		</view>
		<view v-if="liveStatus != '1'" class="live-status" :style="{ width: sysInfo.windowWidth + 'px', marginTop: marginTop + 'px' }">
			<view class="live-status-bg" :class="['live-status-content']" :style="{ width: boxWidth + 'px' }">
				<text class="live-title">
					{{ liveInfo.name }}
				</text>
				<text v-if="liveStatus == '0' && !liveStartCountdown" class="live-countdown">直播倒计时</text>
				<text v-if="liveStatus == '0' && !liveStartCountdown" class="live-desc">
					{{ `${hour}小时${min}分钟${second}秒` }}
				</text>
				<text v-if="liveStartCountdown" class="live-desc" :style="{ width: boxWidth + 'px' }">
					{{ liveStatusText }}
				</text>
				<view v-if="isAnchor">
					<text v-if="timeOver" class="live-desc" style="margin-top: 20px; font-size: 14px" :style="{ width: sysInfo.windowWidth + 'px' }">当前时间不在直播时间范围</text>
					<text v-if="liveStartCountdown && !timeOver" class="live-stop-desc">直播已暂停,重新进入页面可以继续直播</text>
				</view>
				<text @tap="goBack()" class="live-back" :style="{ width: sysInfo.windowWidth + 'px' }">
					{{ liveInfo.liveStatus == '1' && timeOver && isAnchor ? '结束直播并返回' : '返回' }}
				</text>
			</view>
		</view>
	</view>
</template>
<script>
import { getObj, putObj, getPushUrl } from '@/api/live/liveroom';
export default {
	props: {
		liveStatus: [String, Number],
		liveBoxHeight: [String, Number],
		liveInfo: {
			type: Object,
			default() {
				return {};
			}
		},
		sysInfo: {
			type: Object,
			default() {
				return {};
			}
		},
		/**
		 * 是否是主播
		 */
		isAnchor: {
			type: Boolean,
			default: false
		}
	},
	computed: {
		// 直播开始倒计时
		liveStartCountdown() {
			return Number(this.hour) === 0 && Number(this.min) === 0 && Number(this.second) === 0;
		},
		timeOver() {
			if (this.liveInfo.endTime) {
				return new Date().getTime() > new Date(this.liveInfo.endTime).getTime();
			} else {
				return false;
			}
		}
	},
	watch: {
		liveStatus: {
			handler() {
				this.handleLiveStatus();
			},
			immediate: true
		}
	},

	data() {
		return {
			liveStatusText: '', //  直播状态文字
			hour: 0,
			min: 0,
			second: 0,
			boxWidth: 0,
			marginTop: 0,
			liveStartTimer: null
		};
	},
	mounted() {
		this.initView();
	},
	unmounted() {
		if (this.liveStartTimer) {
			clearTimeout(this.liveStartTimer);
		}
	},
	methods: {
		initView() {
			this.boxWidth = this.sysInfo.windowWidth * 0.9;
			this.marginTop = this.sysInfo.windowHeight * 0.35;
		},
		handleLiveStatus() {
			switch (this.liveStatus) {
				case '0': // 未开始
					this.onLiveStartCountdown(); //开播倒计时
					break;
				case '1': // 直播中
					// if (!this.isAnchor) {
					// 	this.$emit('onGetPullUrl');
					// }
					break;
				case '2': //直播已结束
					this.liveStatusText = '直播已结束';
					break;
				case '3': //直播暂停
					this.liveStatusText = '主播暂时离开，请稍等片刻...';
					break;
				case '-1': //直播违规
					this.liveStatusText = '直播已下线';
					break;
			}
		},
		// 开播倒计时
		onLiveStartCountdown() {
			const date = new Date();
			const now = date.getTime(); // 当前时间
			const startTime = new Date(this.liveInfo.startTime).getTime(); // 开播时间
			const timeDiff = startTime - now; // 时间差
			if (timeDiff >= 0) {
				this.hour = Math.floor(timeDiff / 1000 / 60 / 60);
				this.min = Math.floor((timeDiff / 1000 / 60) % 60);
				this.second = Math.floor((timeDiff / 1000) % 60);
			} else {
				this.hour = 0;
				this.min = 0;
				this.second = 0;
			}
			if (this.liveStartCountdown) {
				// 倒计时为0时
				if (this.isAnchor) {
					this.liveStatusText = '已到开播时间范围';
				} else {
					this.liveStatusText = '主播在来的路上~';
					// this.$emit('onGetPullUrl');
				}
				if (this.liveStartTimer) {
					clearTimeout(this.liveStartTimer);
				}
			} else {
				this.liveStartTimer = setTimeout(this.onLiveStartCountdown, 1000);
			}
		},
		// isAnchor: 主播端处理-主播的直播操作
		handleLiveAction(value) {
			this.$emit('changeLiveAction', value);
		},
		goBack() {
			if (this.isAnchor && this.timeOver) {
				// 如果已经超过直播时间,那就直接关闭直播间
				let form = JSON.parse(JSON.stringify(this.liveInfo));
				form.liveStatus = '2';
				form.startTime = null;
				form.endTime = null;
				putObj(form).then((res) => {
					// uni.showToast({
					// 	title: '结束直播成功',
					// 	icon: 'none'
					// });
					uni.navigateBack();
				});
			} else {
				uni.navigateBack();
			}
		}
	}
};
</script>
<style lang="scss" scoped>
// 直播状态
.live-status {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 666;
	justify-content: center;
	align-items: center;
	.live-status-bg {
		background: rgba(0, 0, 0, 0.5);
		border-radius: 20px;
	}
	.live-status-content {
		align-items: center;
		text-align: center;
		padding: 30px 10px;
		&.app {
			transform: translateY(-90rpx);
		}
		&.not-app {
			transform: translateY(-150rpx);
		}
		.live-title {
			font-size: 32rpx;
			color: #fff;
			margin-bottom: 40rpx;
		}
		.live-countdown {
			font-size: 28rpx;
			color: #888888;
			margin-bottom: 20rpx;
		}
		.live-desc {
			font-size: 22px;
			color: #fff;
			text-align: center;
			padding: 0 10px;
		}
		.live-stop-desc {
			font-size: 14px;
			color: #ea937e;
			text-align: center;
			padding: 0 10px;
			margin-top: 30px;
		}
		.live-back {
			margin-top: 40px;
			font-size: 16px;
			color: #fff;
			text-align: center;
			padding: 0 20px;
		}
	}
}
.live-status-desc {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 777;
	background: rgb(120, 120, 120, 0.5);
	padding: 10rpx;
	.live-time {
		color: #ffffff;
		padding: 2rpx 0;
		font-size: 14px;
	}
	.live-anchor-action {
		left: 0;
		display: flex;
		flex-direction: row;
		align-items: center;
		.live-anchor-action-item {
			flex: 1;
			color: #f0f0f0;
			text-align: center;
		}
	}
}
</style>
